<template>
  <div>
    <!-- 搜索条件 -->
    <div class="box">
      <el-form label-width="125px" :model="queryForm" ref="queryRef">
        <el-row>
          <el-col :span="6">
            <el-form-item label="课程：" prop="cur_code">
              <el-select v-model="queryForm.cur_code" class="m-2" placeholder="请选择" filterable clearable>
                <el-option v-for="item in courseList" :key="item.cur_code" :label="item.cur_name"
                  :value="item.cur_code" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="18">
            <el-button @click="queryClassTimeData()" :loading="searchLoading" type="primary">
              <icons name="search"></icons>
              搜索
            </el-button>
            <el-button @click="reset()">
              <icons name="reset"></icons>
              重置
            </el-button>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <!-- table课表 -->
    <div class="container">
      <el-table :data="tableData" v-loading="tableLoading" border style="width: 100%">
        ['weekOne', 'weekTwo', 'weekThr', 'weekFou', 'weekFiv', 'weekSix', 'weekSev']
        <el-table-column prop="weekOne" label="周一" align="center" header-align="center">
          <template #default="{ row, $index }">
            <div v-if="row.weekOne" style="color: #409eff">
              <p>{{ row.weekOne.cur_name }}</p>
              <p>{{ row.weekOne.class_room }}</p>
              <p>{{ `第${$index + 1}节课` }}</p>
            </div>
            <div v-else style="color:#b4b3b3">{{ `第${$index + 1}节` }}无课</div>
          </template>
        </el-table-column>
        <el-table-column prop="weekTwo" label="周二" align="center" header-align="center">
          <template #default="{ row, $index }">
            <div v-if="row.weekTwo" style="color: #409eff">
              <p>{{ row.weekTwo.cur_name }}</p>
              <p>{{ row.weekTwo.class_room }}</p>
              <p>{{ `第${$index + 1}节课` }}</p>
            </div>
            <div v-else style="color:#b4b3b3">{{ `第${$index + 1}节` }}无课</div>
          </template>
        </el-table-column>
        <el-table-column prop="weekThr" label="周三" align="center" header-align="center">
          <template #default="{ row, $index }">
            <div v-if="row.weekThr" style="color: #409eff">
              <p>{{ row.weekThr.cur_name }}</p>
              <p>{{ row.weekThr.class_room }}</p>
              <p>{{ `第${$index + 1}节课` }}</p>
            </div>
            <div v-else style="color:#b4b3b3">{{ `第${$index + 1}节` }}无课</div>
          </template>
        </el-table-column>
        <el-table-column prop="weekFou" label="周四" align="center" header-align="center">
          <template #default="{ row, $index }">
            <div v-if="row.weekFou" style="color: #409eff">
              <p>{{ row.weekFou.cur_name }}</p>
              <p>{{ row.weekFou.class_room }}</p>
              <p>{{ `第${$index + 1}节课` }}</p>
            </div>
            <div v-else style="color:#b4b3b3">{{ `第${$index + 1}节` }}无课</div>
          </template>
        </el-table-column>
        <el-table-column prop="weekFiv" label="周五" align="center" header-align="center">
          <template #default="{ row, $index }">
            <div v-if="row.weekFiv" style="color: #409eff">
              <p>{{ row.weekFiv.cur_name }}</p>
              <p>{{ row.weekFiv.class_room }}</p>
              <p>{{ `第${$index + 1}节课` }}</p>
            </div>
            <div v-else style="color:#b4b3b3">{{ `第${$index + 1}节` }}无课</div>
          </template>
        </el-table-column>
        <el-table-column prop="weekSix" label="周六" align="center" header-align="center">
          <template #default="{ row, $index }">
            <div v-if="row.weekSix" style="color: #409eff">
              <p>{{ row.weekSix.cur_name }}</p>
              <p>{{ row.weekSix.class_room }}</p>
              <p>{{ `第${$index + 1}节课` }}</p>
            </div>
            <div v-else style="color:#b4b3b3">{{ `第${$index + 1}节` }}无课</div>
          </template>
        </el-table-column>
        <el-table-column prop="weekSev" label="周日" align="center" header-align="center">
          <template #default="{ row, $index }">
            <div v-if="row.weekSev" style="color: #409eff">
              <p>{{ row.weekSev.cur_name }}</p>
              <p>{{ row.weekSev.class_room }}</p>
              <p>{{ `第${$index + 1}节课` }}</p>
            </div>
            <div v-else style="color:#b4b3b3">{{ `第${$index + 1}节` }}无课</div>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>
<script lang="ts">
import { queryClassTimeList } from '@/api/public'
import { queryCourseList } from '@/api/mymodel'
import { defineComponent, reactive, ref } from 'vue'
import useCurrentInstance from '@/utils/useCurrentInstance'
import { ElMessage } from 'element-plus'
import messages from '@/utils/language'
export default defineComponent({
  setup(props) {
    const { proxy } = useCurrentInstance()
    const userInfo: any = window.sessionStorage.getItem('userInfo')
    const searchLoading = ref(false)
    const tableLoading = ref(false)
    const courseList: any = ref([])
    const tableData: any = ref([])
    const queryRef: any = ref(null)
    const queryForm = reactive({
      cur_code: null,
      tea_code: JSON.parse(userInfo).tea_code
    })

    const queryClassTimeData = () => {
      const week = ['weekOne', 'weekTwo', 'weekThr', 'weekFou', 'weekFiv', 'weekSix', 'weekSev']
      const classNum = [1, 2, 3, 4, 5, 6] // 一天六节课
      tableData.value = []
      searchLoading.value = true
      tableLoading.value = true
      queryClassTimeList(queryForm).then((res: any) => {
        const { data } = res
        classNum.forEach((item, index) => {
          const obj: any = {}
          data.forEach((ite: any, ind) => obj[week[ind]] = ite[index])
          tableData.value.push(obj)
        })
      }).finally(() => {
        searchLoading.value = false
        tableLoading.value = false
      })
    }

    const reset = () => {
      queryRef.value.resetFields()
    }

    const getCourseList = () => {
      queryCourseList({ tea_code: JSON.parse(userInfo).tea_code }).then((res: any) => {
        courseList.value = res.data
      })
    }

    getCourseList()
    queryClassTimeData()

    return {
      courseList,
      searchLoading,
      tableLoading,
      tableData,
      queryForm,
      queryRef,
      queryClassTimeData,
      reset
    }
  }
})
</script>
